<template>
	<view class="work-container">
		<view class="bigImg" style="width: 90%;text-align: center;">
			<image-view
				v-if="list.targetFieldMapping.panoramaVehicleUrl && list.targetFieldMapping.panoramaVehicleUrl.indexOf('http') > -1"
				style="width: 100%;" :src="list.targetFieldMapping.panoramaVehicleUrl" :big='true'
				:qj="list.targetFieldMapping.panoramaVehicleUrl"></image-view>
			<image-view
				v-if="list.targetFieldMapping.panoramaVehicleUrl && !(list.targetFieldMapping.panoramaVehicleUrl.indexOf('http') > -1)"
				style="width: 100%;" :src="list.targetFieldMapping.panoramaVehicleUrl" :big='true'
				:qj="list.targetFieldMapping.panoramaVehicleUrl"></image-view>
			<view>{{ $t('search:panorama') }}</view>
		</view>
		<view style="width: 100%;display: flex;justify-content: flex-start;">
			<view class="bigImg" style="text-align: center;width: auto;margin: 20px;position: relative;">
				<view class="details-icon-search" v-if='list.targetFieldMapping.captureVehicleUrl'
					@click="searchAgain(list.targetFieldMapping.captureVehicleUrl)"></view>
				<image-view
					v-if="list.targetFieldMapping.captureVehicleUrl && list.targetFieldMapping.captureVehicleUrl.indexOf('http') > -1"
					:src="list.targetFieldMapping.captureVehicleUrl" style="width: 100%;height: 100%"></image-view>
				<image-view
					v-if="list.targetFieldMapping.captureVehicleUrl && !(list.targetFieldMapping.captureVehicleUrl.indexOf('http') > -1)"
					:src="list.targetFieldMapping.captureVehicleUrl" style="width: 100%;height: 100%"></image-view>
				<view>{{ $t('search:snapshot') }}</view>
			</view>
		</view>

		<view class="Nav">
			<view :class="index == 1 ? 'typeCarS' : 'typeCar'" @click="NavClick(1)">
				{{ $t('search:basicAttributes') }}
			</view>
			<view :class="index == 2 ? 'typeCarS' : 'typeCar'" @click="NavClick(2)">
				{{ $t('search:partialFeatures') }}
			</view>
		</view>
		<ul class="ul" v-if="index == 1">
			<li class="li">
				<view class="title">{{ $t('search:targetType') }}</view>
				<view class="tit">{{ vehicleType }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:captureTime') }}</view>
				<view class="tit">{{ captureTime }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:captureDevice') }}</view>
				<view class="tit">{{ list.targetFieldMapping.deviceName }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:plateNumber') }}</view>
				<view class="tit">
					{{ list.targetFieldMapping.vehiclePlateNumber == null ? $t('search:unknown') :
						list.targetFieldMapping.vehiclePlateNumber }}
				</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:vehicleType') }}</view>
				<view class="tit">{{ vehicleType }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:vehicleColor') }}</view>
				<view class="tit">{{ vehicleColor }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:plateType') }}</view>
				<view class="tit">{{ vehiclePlateClass }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:plateColor') }}</view>
				<view class="tit">{{ vehiclePlateColor }}</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:plateOcclusion') }}</view>
				<view class="tit">{{ vehicleIsCovered }}</view>
			</li>
		</ul>
		<ul class="ul" v-if="index == 2">
			<li class="li">
				<view class="title">{{ $t('search:calling') }}</view>
				<view class="tit">
					<span v-if="list.targetFieldMapping.driverCall == null">{{ $t('search:unknown') }}</span>
					<span v-if="list.targetFieldMapping.driverCall == 0">{{ $t('search:no') }}</span>
					<span v-if="list.targetFieldMapping.driverCall == 1">{{ $t('search:yes') }}</span>
					<span v-if="list.targetFieldMapping.driverCall == 2">{{ $t('search:unrecognized') }}</span>
				</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:luggageRack') }}</view>
				<view class="tit">
					<span v-if="list.targetFieldMapping.rack == null">{{ $t('search:unknown') }}</span>
					<span v-if="list.targetFieldMapping.rack == 0">{{ $t('search:no') }}</span>
					<span v-if="list.targetFieldMapping.rack == 1">{{ $t('search:yes') }}</span>
					<span v-if="list.targetFieldMapping.rack == 2">{{ $t('search:unrecognized') }}</span>
				</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:sunroof') }}</view>
				<view class="tit">
					<span v-if="list.targetFieldMapping.sunroof == null">{{ $t('search:unknown') }}</span>
					<span v-if="list.targetFieldMapping.sunroof == 0">{{ $t('search:no') }}</span>
					<span v-if="list.targetFieldMapping.sunroof == 1">{{ $t('search:yes') }}</span>
					<span v-if="list.targetFieldMapping.sunroof == 2">{{ $t('search:unrecognized') }}</span>
				</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:spareTire') }}</view>
				<view class="tit">
					<span v-if="list.targetFieldMapping.spareTire == null">{{ $t('search:unknown') }}</span>
					<span v-if="list.targetFieldMapping.spareTire == 0">{{ $t('search:no') }}</span>
					<span v-if="list.targetFieldMapping.spareTire == 1">{{ $t('search:yes') }}</span>
					<span v-if="list.targetFieldMapping.spareTire == 2">{{ $t('search:unrecognized') }}</span>
				</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:driverBelt') }}</view>
				<view class="tit">
					<span v-if="list.targetFieldMapping.driverSeatBell == null">{{ $t('search:unknown') }}</span>
					<span v-if="list.targetFieldMapping.driverSeatBell == 0">{{ $t('search:beltNotWorn') }}</span>
					<span v-if="list.targetFieldMapping.driverSeatBell == 1">{{ $t('search:beltWorn') }}</span>
					<span v-if="list.targetFieldMapping.driverSeatBell == 2">{{ $t('search:unrecognized') }}</span>
				</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:passengerBelt') }}</view>
				<view class="tit">
					<span v-if="list.targetFieldMapping.deputySeatBell == null">{{ $t('search:unknown') }}</span>
					<span v-if="list.targetFieldMapping.deputySeatBell == 0">{{ $t('search:beltNotWorn') }}</span>
					<span v-if="list.targetFieldMapping.deputySeatBell == 1">{{ $t('search:beltWorn') }}</span>
					<span v-if="list.targetFieldMapping.deputySeatBell == 2">{{ $t('search:unrecognized') }}</span>
				</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:sunVisor') }}</view>
				<view class="tit">
					<span v-if="list.targetFieldMapping.visor == null">{{ $t('search:unknown') }}</span>
					<span v-if="list.targetFieldMapping.visor == 0">{{ $t('search:unrecognized') }}</span>
					<span v-if="list.targetFieldMapping.visor == 1">{{ $t('search:recognized') }}</span>
				</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:inspectionSticker') }}</view>
				<view class="tit">
					<span v-if="list.targetFieldMapping.visor == null">{{ $t('search:unknown') }}</span>
					<span v-if="list.targetFieldMapping.visor == 0">{{ $t('search:unrecognized') }}</span>
					<span v-if="list.targetFieldMapping.visor > 1">{{ $t('search:recognized') }}</span>
				</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:tissueBox') }}</view>
				<view class="tit">
					<span v-if="list.targetFieldMapping.paper == null">{{ $t('search:unknown') }}</span>
					<span v-if="list.targetFieldMapping.paper == 0">{{ $t('search:no') }}</span>
					<span v-if="list.targetFieldMapping.paper == 1">{{ $t('search:yes') }}</span>
					<span v-if="list.targetFieldMapping.paper == 2">{{ $t('search:unrecognized') }}</span>
				</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:pendant') }}</view>
				<view class="tit">
					<span v-if="list.targetFieldMapping.pendant == null">{{ $t('search:unknown') }}</span>
					<span v-if="list.targetFieldMapping.pendant == 0">{{ $t('search:no') }}</span>
					<span v-if="list.targetFieldMapping.pendant == 1">{{ $t('search:yes') }}</span>
					<span v-if="list.targetFieldMapping.pendant == 2">{{ $t('search:unrecognized') }}</span>
				</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:dumper') }}</view>
				<view class="tit">
					<span v-if="list.targetFieldMapping.muckCars == null">{{ $t('search:unknown') }}</span>
					<span v-if="list.targetFieldMapping.muckCars == 0">{{ $t('search:no') }}</span>
					<span v-if="list.targetFieldMapping.muckCars == 1">{{ $t('search:yes') }}</span>
					<span v-if="list.targetFieldMapping.muckCars == 2">{{ $t('search:unrecognized') }}</span>
				</view>
			</li>
			<li class="li">
				<view class="title">{{ $t('search:dangerousGoods') }}</view>
				<view class="tit">
					<span v-if="list.targetFieldMapping.dangerGoods == null">{{ $t('search:unknown') }}</span>
					<span v-if="list.targetFieldMapping.dangerGoods == 0">{{ $t('search:no') }}</span>
					<span v-if="list.targetFieldMapping.dangerGoods == 1">{{ $t('search:yes') }}</span>
					<span v-if="list.targetFieldMapping.dangerGoods == 2">{{ $t('search:unrecognized') }}</span>
				</view>
			</li>
		</ul>
	</view>
</template>

<script>
import {
	getsSearchCar
} from '@/api/cljs.js'
export default {
	data() {
		return {
			index: 1,
			imgUrl: "/fileApi/",
			list: {
				targetFieldMapping: {}
			},
			form: {}
		}
	},
	computed: {
		captureTime() {
			const num = this.list.targetFieldMapping?.captureTime
			if (num == '' || num == null) {
				return this.$t('search:none')
			} else {
				let date = new Date(num);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
			}
		},
		vehicleType() {
			const str = this.list.targetFieldMapping?.vehicleType,
				sexEnum = {
					'null': this.$t('search:unknownVehicle'),
					"0": this.$t('search:unknownOther'),
					"1": this.$t('search:carPlaceholder'),
					"2": this.$t('search:truckPlaceholder'),
					"3": this.$t('search:van'),
					"4": this.$t('search:bus'),
					"5": this.$t('search:smallTruckPlaceholder'),
					"6": this.$t('search:suvPlaceholder'),
					"7": this.$t('search:midBus'),
					"8": this.$t('search:motorcycleNonMotor'),
					"9": this.$t('search:pedestrian'),
					"10": this.$t('search:schoolBus'),
					"11": this.$t('search:dumpTruck'),
					"12": this.$t('search:highRisk'),
					"13": this.$t('search:cyclistPlaceholder'),
					"15": this.$t('search:microCar'),
					"16": this.$t('search:smallCar'),
					"17": this.$t('search:compactCar'),
					"18": this.$t('search:hatchback'),
					"19": this.$t('search:sedan'),
					"20": this.$t('search:lightVan'),
					"21": this.$t('search:smallSuv'),
					"22": this.$t('search:compactSuv'),
					"23": this.$t('search:midSuv'),
					"24": this.$t('search:largeSuv'),
					"25": this.$t('search:fullSizeSuv'),
					"26": this.$t('search:microVan'),
					"27": this.$t('search:mpv'),
					"28": this.$t('search:coupe'),
					"29": this.$t('search:miniTruck'),
					"30": this.$t('search:pickup'),
					"31": this.$t('search:midTruck'),
					"32": this.$t('search:lightTruck'),
					"33": this.$t('search:heavyTruck'),
					"34": this.$t('search:taxi'),
					"35": this.$t('search:tanker'),
					"36": this.$t('search:crane'),
					"37": this.$t('search:trailer'),
					"38": this.$t('search:mixerTruck'),
					"40": this.$t('search:fireTruck'),
					"41": this.$t('search:escort'),
					"42": this.$t('search:repairTruck'),
					"43": this.$t('search:rescue'),
					"512": this.$t('search:allModels')
				}
			return sexEnum[str] || '--'
		},
		vehicleColor() {
			const str = this.list.targetFieldMapping?.vehicleColor,
				sexEnum = {
					'null': this.$t('search:unknown'),
					"0": this.$t('search:unknownUnrecognized'),
					"1": this.$t('search:black'),
					"2": this.$t('search:white'),
					"3": this.$t('search:gray'),
					"4": this.$t('search:red'),
					"5": this.$t('search:blue'),
					"6": this.$t('search:yellow'),
					"7": this.$t('search:orange'),
					"8": this.$t('search:brown'),
					"9": this.$t('search:green'),
					"10": this.$t('search:purple'),
					"11": this.$t('search:cyan'),
					"12": this.$t('search:pink'),
					"13": this.$t('search:transparent'),
					"14": this.$t('search:gold'),
					"15": this.$t('search:silver'),
					"16": this.$t('search:darkGray')
				}
			return sexEnum[str] || '--'
		},
		vehiclePlateColor() {
			const str = this.list.targetFieldMapping?.vehiclePlateColor,
				sexEnum = {
					'null': this.$t('search:unknown'),
					"0": this.$t('search:unknownUnrecognized'),
					"1": this.$t('search:black'),
					"2": this.$t('search:white'),
					"5": this.$t('search:blue'),
					"6": this.$t('search:yellow'),
					"9": this.$t('search:green'),
					"14": this.$t('search:gradualGreenBlack'),
					"15": this.$t('search:yellowGreenBlack'),
				}
			return sexEnum[str] || '--'
		},
		vehiclePlateClass() {
			const str = this.list.targetFieldMapping?.vehiclePlateClass,
				sexEnum = {
					'null': this.$t('search:unknown'),
					"0": this.$t('search:unknownType'),
					"1": this.$t('search:bluePlate'),
					"2": this.$t('search:blackPlate'),
					"3": this.$t('search:yellowPlate'),
					"4": this.$t('search:doubleYellow'),
					"5": this.$t('search:policePlate'),
					"6": this.$t('search:armedPolice'),
					"7": this.$t('search:doubleWhiteArmed'),
					"8": this.$t('search:militaryPlate'),
					"9": this.$t('search:doubleMilitary'),
					"10": this.$t('search:consulatePlate'),
					"11": this.$t('search:hkPlate'),
					"13": this.$t('search:macauPlate'),
					"14": this.$t('search:tractorPlate'),
					"15": this.$t('search:factoryPlate'),
					"16": this.$t('search:customPlate'),
					"17": this.$t('search:newEnergyPlate'),
					"18": this.$t('search:otherType'),
					"19": this.$t('search:trailer'),
					"20": this.$t('search:coachPlate'),
					"21": this.$t('search:tempPlate'),
					"100": this.$t('search:foreignTemp'),
				}
			return sexEnum[str] || '--'
		},
		vehicleIsCovered() {
			const str = this.list.targetFieldMapping?.vehicleIsCovered,
				sexEnum = {
					'null': this.$t('search:unknown'),
					"0": this.$t('search:no'),
					"1": this.$t('search:yes'),
					"2": this.$t('search:unrecognized')
				}
			return sexEnum[str] || '--'
		}
	},
	onLoad(option) {
		this.form = {
			sysCaptureVehicleIds: [option.sysCaptureVehicleIds],
			targetFields: ['capDirection', 'capDirectionScore', 'captureDataType', 'captureExtField1',
				'captureExtField2', 'captureExtField3', 'captureExtField4', 'captureExtField5',
				'captureReceiveTime', 'captureSeq', 'captureTime', 'captureType', 'captureVehicleInfraredUrl',
				'captureVehicleUrl', 'createTime', 'curRecordBodyTotal', 'curRecordFaceTotal',
				'curRecordNonVehicleTotal', 'curRecordVehicleTotal', 'dangerGoods', 'dangerGoodsScore',
				'dataSource', 'day', 'decoration', 'decorationScore', 'deputySeatBell', 'deputySeatBellScore',
				'deputyVisor', 'deputyVisorScore', 'detPaper', 'detPaperScore', 'devExtField1', 'devExtField2',
				'devExtField3', 'deviceAddress', 'deviceId', 'deviceName', 'deviceType', 'deviceVisor',
				'deviceVisorScore', 'direction', 'directionScore', 'driverCall', 'driverCallScore',
				'driverSeatBell', 'driverSeatBellScore', 'drivingStatusCode', 'drivingStatusCodeScore',
				'duplicateTag', 'egCaptureId', 'fromSystem', 'guid', 'hour', 'isLinkage', 'laneNo',
				'laneNoScore', 'lat', 'lng', 'mon', 'month', 'motTag', 'motTagScore', 'muckCars',
				'muckCarsScore', 'panoramaVehicleInfraredUrl', 'panoramaVehicleUrl', 'paper', 'paperScore',
				'pendant', 'pendantScore', 'rack', 'rackScore', 'remark', 'spareTire', 'spareTireScore',
				'speed', 'speedScore', 'subDeviceType', 'subType', 'sunroof', 'sunroofScore', 'systemNo',
				'targetVehicleBoxHeight', 'targetVehicleBoxWidth', 'targetVehicleBoxX', 'targetVehicleBoxY',
				'targetVehiclePlateBoxHeight', 'targetVehiclePlateBoxWidth', 'targetVehiclePlateBoxX',
				'targetVehiclePlateBoxY', 'vehicleBoxHeight', 'vehicleBoxWidth', 'vehicleBoxX', 'vehicleBoxY',
				'vehicleBrand', 'vehicleBrandScore', 'vehicleCaptureClusterStatus',
				'vehicleCaptureDeleteStatus', 'vehicleCaptureExternalId', 'vehicleCaptureTime', 'vehicleColor',
				'vehicleColorDepth', 'vehicleColorDepthScore', 'vehicleColorScore', 'vehicleDetClothing',
				'vehicleDetClothingScore', 'vehicleDetLight', 'vehicleDetLightScore', 'vehicleDetLogo',
				'vehicleDetLogoScore', 'vehicleDetOtherSundries', 'vehicleDetOtherSundriesScore',
				'vehicleDetWaterBottle', 'vehicleDetWaterBottleScore', 'vehicleDossierId',
				'vehicleFaceBoxHeight', 'vehicleFaceBoxWidth', 'vehicleFaceBoxX', 'vehicleFaceBoxY',
				'vehicleFeature', 'vehicleFeatureStatus', 'vehicleFeatureStatusRemark', 'vehicleFileId',
				'vehicleHasPlate', 'vehicleHasPlateScore', 'vehicleHeight', 'vehicleHeightScore',
				'vehicleIsAltered', 'vehicleIsAlteredScore', 'vehicleIsCovered', 'vehicleIsCoveredScore',
				'vehicleIsDecked', 'vehicleIsDeckedScore', 'vehicleLength', 'vehicleLengthScore',
				'vehicleLinger', 'vehicleLogId', 'vehicleModel', 'vehicleModelScore', 'vehicleObjectId',
				'vehiclePlateBoxHeight', 'vehiclePlateBoxWidth', 'vehiclePlateBoxX', 'vehiclePlateBoxY',
				'vehiclePlateClass', 'vehiclePlateClassScore', 'vehiclePlateColor', 'vehiclePlateColorScore',
				'vehiclePlateDescribe', 'vehiclePlateDescribeScore', 'vehiclePlateLines',
				'vehiclePlateLinesScore', 'vehiclePlateMoveDirection', 'vehiclePlateMoveDirectionScore',
				'vehiclePlateNumber', 'vehiclePlateNumberScore', 'vehiclePlateUrl', 'vehicleQualityScore',
				'vehicleQualityScoreExt', 'vehicleReserveInfo', 'vehicleTemperature',
				'vehicleTemperatureScore', 'vehicleTrackId', 'vehicleTrackIdBeginTime', 'vehicleType',
				'vehicleTypeScore', 'vehicleWidth', 'vehicleWidthScore', 'visor', 'visorScore', 'year'
			]
		}
	},
	onShow() {
		this.details()
	},
	methods: {
		searchAgain(src) {
			var obj = {}
			obj.imgUrl = src
			obj.showType = 4
			this.$tab.redirectTo('/pages/search/cljs/index?param=' + encodeURIComponent(JSON.stringify(obj)))
		},
		NavClick(index) {
			this.index = index
		},
		details() {
			getsSearchCar(this.form).then(res => {
				this.list = res.data[0]
			})
		}
	}
}
</script>

<style scoped>
page {
	background-color: #fff;
}

.top {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 40rpx 40rpx 10rpx 40rpx;
}

.top .image {
	width: 35%;
}

.image .img {
	width: 235rpx;
	height: 235rpx;
	border-radius: 10rpx;
}

.Proportion_box {
	width: 30%;
	padding: 30rpx 30rpx;
}

.Proportion {
	width: 148rpx;
	height: 148rpx;
	font-size: 40rpx;
	color: #2979ff;
	border-radius: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #2979ff;
}

.text {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 40rpx 30rpx 40rpx;
}

.text .txt {
	width: 35%;
	text-align: center;
	color: #8d8d8d;
}

.ul {
	padding: 0 40rpx;
}

.li {
	display: flex;
	align-items: center;
	justify-content: start;
	padding: 30rpx 0;
	border-bottom: 1px solid #ddd;
}

.li .title {
	color: #595959;
	width: 30%;
}

.li .tit {
	width: 70%;
	color: #000;
	display: flex;
	justify-content: flex-end;
}

.Nav {
	width: 700rpx;
	margin: auto;
	display: flex;
	justify-content: space-evenly;
	border-bottom: 1px solid #f1f1f1;
}

.typeCar {
	padding: 20rpx;
}

.typeCarS {
	padding: 20rpx;
	border-bottom: 1px solid #2979ff;
	color: #2979ff;
}

.bigImg {
	width: 300rpx;
	height: 400rpx;
	margin: 40rpx auto;
}

.bigImg image {
	width: 300rpx;
	height: 400rpx;
}

.details-icon-search {
	width: 28px;
	height: 28px;
	position: absolute;
	top: 0;
	right: 0px;
	z-index: 1;
	background: url('../../../static/images/icon_search.png');
	background-size: 100% 100%;
}
</style>